<template>
    <el-tree
      :data="data"
      node-key="id"
      default-expand-all
      @node-drag-start="handleDragStart"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"
      @node-click="click"
      :draggable="true"
      :show-checkbox="showCheckBox"
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
      :props="defaultProps"
    >
    </el-tree>
  </template>
  <script>
  import {findAll,updateMenu,editOne,addOne,deleteOne} from '../../api/rbacMenu'
    export default {
      props:['showCheckBox'],
      created(){
        this.initMenu();
      },
      data() {
        return {
          data: [],
          defaultProps: {
            children: "menuList",
            label: "menuname",
          },
        };
      },
      methods: {
        initMenu(){
          const userdataJSON = localStorage.getItem('userdata');
          const userdata = JSON.parse(userdataJSON);
          console.log(userdata.id);
          findAll(userdata.id).then(
            res=>{
                console.log(res);
                this.data = res.data
            }
           ).catch();
        },
        //开始拖动的那个节点
        handleDragStart(node, ev) {
          console.log("开始拖动：……", node.data.menuname);
        },
        //进入节点成为子节点
        handleDragEnter(draggingNode, dropNode, ev) {
          console.log("tree drag enter: ", dropNode);
        },
        //拖拽结束后的方法
        handleDragEnd(draggingNode, dropNode, dropType, ev) {
          console.log("tree drag end: ", dropNode && dropNode.label, dropType);
        },
        //类似java中的finally
        handleDrop(draggingNode, dropNode, dropType, ev) {
          console.log("被拖拽的节点？",draggingNode);
          //dropNode：目的地节点 after before inner两种情况 
          let fid = null;
            if(dropType == 'inner'){
              //我们可以直接获取dropNode的id作为，我们拖拽节点的fid = dropNode.data.id
              console.log("成为- "+dropNode.data.menuname+"-的子节点",dropNode.data, dropType);
              fid = dropNode.data.id
            }else{
              //after before 表示成为兄弟节点。
              console.log("成为-"+dropNode.data.menuname+"-的兄弟节点",dropNode.parent, dropType);
              //这里要分为2种情况，一种是目标的爸的爸是null
              if(dropNode.parent.parent != null){
                fid = dropNode.parent.data.id;
              }else{
                fid = 0;
              }
            }
            updateMenu(draggingNode.data.id,fid).then().catch();
        },
        //拖拽结束后，返回true节点才会移动
        allowDrop(draggingNode, dropNode, type) {
          // if (dropNode.data.label === "二级 3-1") {
          //   return type !== "inner";
          // } else {
            return true;
          // }
        },
        //返回true才能允许拖动节点
        allowDrag(draggingNode) {
          return true;
        },
  // 点击事件，触发回调
        click(a1){
          console.log(a1);
          this.$emit('clickNode',a1)
        },
        editOne(data){
          editOne(data).then().catch();
        },
        addOne(data){
          addOne(data).then().catch();
        },
        deleteOne(id){
          deleteOne(id).then().catch();
        }
      },
    };
  </script>